<template>
  <dt-grid ref="gridRef" :onFetch="onFetch" page>
    <template #btn>
      <div class="flex">
        <Button type="primary" @click="createRole">新建角色</Button>
      </div>
    </template>
  </dt-grid>
  <!--新增，编辑角色-->
  <edit-page ref="editRef" @search="onSearch"></edit-page>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import dt from '@dt/dt'
  import { columnOpt } from './biz/column'
  import roleMgr from './biz/index'
  import editPage from './component/editPage.vue'

  const [gridRef, editRef] = [ref(), ref()]

  onMounted(() => {
    gridRef.value.init(new columnOpt(fun))
    gridRef.value.fetch()
  })

  function onFetch(data) {
    return roleMgr.sysRoleList(data)
  }

  function createRole() {
    editRef.value.add()
  }

  function onSearch() {
    gridRef.value.fetch()
  }

  const fun = {
    editFun: (row) => {
      editRef.value.edit(row)
    },
    changeValidFlag: (row) => {
      dt.ui.Modal.confirm({
        title: `${row.state == '1' ? '禁用' : '启用'}角色`,
        content: `请确认,您要${row.state == '1' ? '禁用' : '启用'}该角色！`,
        onOk: () => {
          row.state = row.state == '1' ? '0' : '1'
          let params = {
            ...row
          }
          roleMgr.sysRoleUpdate(params).then((res) => {
            dt.ui.Message.success('修改成功')
            gridRef.value.fetch()
          })
        }
      })
    }
  }
</script>

<style scoped></style>
